<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../utils/vue.min.js"></script>
		<style>
			/**
			 * 	v-enter是一个时间点,是入场初态;
			 * 	v-leave-to 是一个时间点,是离场终态;
			 */
			.v-enter, 
			.v-leave-to{
				opacity: 0;
			}
			/**
			 * v-enter-active是一个时间段，是入场动画持续的时间；
			 * v-leave-active是一个时间段，是离场动画持续的时间；
			 * */
			.v-enter-active,
			.v-leave-active{
				transition: all 0.8s ease;
			}
			/**
			 * v-enter-to 是一个时间点，是入场终态；
			 * v-leave 是一个时间点，是离场初态；
			 * */
			 .v-enter-to,
			 .v-leave{
				 opacity: 1;
			 }
			 
			 @keyframes shuanghsuang{
			 	from{background-color: yellow;}
			 	to{background-color:red;}
			 }
			 .shuang{
				 animation: shuanghsuang;
				 animation-duration: 2s;
			 }
			 @keyframes shuangshuang2{
				0% {background-color: #008000;}
				30%{background-color: #ffff7f;}
				50%{background-color: cornflowerblue;}
			 }
			 .shuang2{
				 animation: shuangshuang2;
				 animation-duration: 5s;
			 }
			 
			 @keyframes rotate{
			 	from{transform: rotateZ(0);}
			 	to{transform: rotateZ(360deg);}
			 }
			 .roteta{
				 animation: rotate;
				 animation-duration: 3s;
				 animation-timing-function: linear;
				 animation-iteration-count: infinite;
				 animation-play-state: running;
			 }
			 
		</style>
	</head>
	<body>
		<div id="app">
			<button @click="click">click me</button>
			<transition>
				<h3 v-show="flag" >渐入渐出动画</h3>
			</transition>
			
			<p class="shuang">css动画-改变背景颜色</p>
			<button type="button" @click="click2()" >click to change background-color</button>
			<p :class="colorFlag?'shuang2':''">css动画-改变背景颜色</p>
			
			<br />
			<img :class="isRunning?'roteta':'' " src="../images/celamoon.png" @click="click3()"  />
		</div>
	</body>
	
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				flag:false,
				colorFlag:false,
				isRunning:false
			},
			methods:{
				click:function(){
					this.flag = !this.flag;
				},
				click2:function(){
					this.colorFlag = !this.colorFlag;
				},
				click3:function(){
					this.isRunning = !this.isRunning;
				}
			}
		})
	</script>
</html>
